@import url('https://fonts.googleapis.com/css?family=Spartan'); /* Importamos una fuente*/

* { /* General style */
  font-family: 'Spartan', cursive;
  box-sizing: border-box;
}

h6 {
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 10px;
    margin-bottom: 10px;
}

p {/* Paragraph style */
    margin-left: 50px;
    margin-right: 50px;
    margin-top: 2px;
    margin-bottom: 2px;
    font-size: 12px;
}
/* Body style*/
body {
    margin: 0px;
    padding: 0px;
    display: flex;
    width: 100%;
    height: 100%;
    position: absolute;
}
#react-entry-point{
    margin: 0px;
    padding: 0px;
    display: flex;
    width: 100%;
    height: 100%;
    position: absolute;
}

#_dash-global-error-container{
    margin: 0px;
    padding: 0px;
    display: flex;
    width: 100%;
    height: 100%;
    position: absolute;
}/*
.dash-debug-menu__outer, .dash-debug-menu, .dash-debug-menu--closed, .dash-debug-menu__outer--closed{
    height: 60px !important;
    width: 60px !important;

}*/
button { /* Style of the buttons*/
  align: center;
  border-radius: 4px;
  border: none;
  background-color: #1DAF6E;
  padding: 15px;
  margin: 25px;
  cursor: pointer;
  color:#FFFFFF;
  text-align: center;
  font-size: 25px;
  align-self:  center;
  transition: all 2.5s;
}

.sectionVisible {
    display: block;
}

.sectionInvisible {
    display: none;
}

.stack-top{
    z-index: 9;
    opacity: 0.9;

}
/* Grid to specify sizes*/
.col-1 {width: 5%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}


/* Title Style */
.title{
    background-color: #986EA8;
    color: #ffffff;
    padding: 5px;
    text-align: center;
    margin: 5px;
    border-radius: 5px;
}

.subtitle{
    color: #ffffff;
    text-align: center;
    margin: 0px;
    border-radius: 5px;
}

/* To center */
.middle {
    vertical-align: middle;
    text-align:center;
    left:10%;
    position:relative; /*makes left effective*/
    display:table-cell;
}

/* Margins */
.paddings{
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 10px;
  padding-bottom: 10px;
}

#filters_container{
  background-color: #333333;
  padding: 15px;
  color: #FFFFFF;
  opacity: 0.6;
  height: wrap-content;
  border-radius: 5px;
  align: left;
  text-align: left;
  position: absolute;
  top:1%;
  left:1%;
}
#filters_container:hover{
    opacity:1;
}
#filters_container h2{
    margin: 5px;
}

#preferencesText{
    margin: 5px;
}

#filters_drop{
    border-radius: 5px;
}
#select_filters_arrow{
    position: absolute;
    top: 15px;
    padding: inherit;
    right: 15px;
}

.dropdownMenu{
  width: 100%;
  text-align: left;
  border-radius: 5px;
  outline: none; /* Remove outline */
  opacity: 0.8; /* Set transparency (for mouse-over effects on hover) */
  -webkit-transition: .2s; /* 0.2 seconds transition on hover */
  transition: opacity .2s;
  margin: 5px;
}

.dropdownMenu:hover {
  opacity: 1; /* Fully shown on mouse-over */
}

.dropdownMenu p{
    font-size: 50% ! important;
}

.Select-menu-outer{
    background-color: #444444;
    border-radius: 5px;
}
.Select-control {
    padding: 5px;
}
.Select-control:focus, .Select-control:select, .is-focused{
    box-shadow: 5px solid #F3D576 !important;
    border: 1px solid #F3D576 !important;
}

.is-focused:not(is-open)>.Select-control{
    box-shadow: 5px solid #F3D576 !important;
    border: 1px solid #F3D576 !important;
}
.Select-value {
    background-color: #555555 !important;
    border-radius: 5px !important;
    border: none !important;
    color: #EEEEEE !important;
    margin: 5px;
}

.Select-value-icon  {
    border: none !important;
}
.Select-value-icon:hover {
    color: yellow !important;
}

.background-map-container{
    width: 100% !important;
    height: 100% !important;
    margin: 0px !important;
    position: relative;
}

.mapboxgl-map {
    width: 100% !important;
    height: 100% !important;
    left: 0px !important;
    top: 0px !important;
}

#info_bar{
    background-color: #333333;
    padding: 10px;
    color: #FFFFFF;
    opacity: 0.8;
    height: wrap-content;
    width: 100%;
    position: absolute;
    bottom: 3%;
    z-index=1;
}

#info_bar:hover {
    opacity: 1;
}

#selected_location{
    background-color: #333333;
    padding: 10px;
    color: #FFFFFF;
    opacity: 0.8;
    border-radius: 5px;
    height: 78%;
    width: 72%;
    position: absolute;
    top: 1%;
    left: 27%;
    z-index: 1000 !important;
}

#selected_location h3{
    margin: 10px;
}
#selected_location:hover{
    opacity:1;
}

#x_close_selection{
    position: absolute;
    background: inherit;
    color: #F3D576;
    height: 20px;
    width: 20px;
    top: 15px;
    padding: inherit;
    right: 15px;
    cursor: pointer;
}

#hovered_location{
    background-color: #333333;
    color: #FFFFFF;
    opacity: 0.8;
    border-radius: 5px;
    height: wrap-content;
    width: wrap-content;
    position: absolute;
    z-index:10;
}

#hovered_location h3{
    margin: 10px;
}


#initial_popup {
    background-color: #333333;
    padding: 10px;
    color: #FFFFFF;
    opacity: 1;
    height: 100%;
    width: 100%;
    position: absolute;
    z-index:1000;
    padding: 5%;
    text-align-last: auto;
}

#initial_popup h3, #initial_popup p {
    font-size: 150%;
}

#initial_popup h1 {
    font-size: 500%;
}

.author_name, .source{
    font-size: 100% !important;
}

.plots_container{
    display: flex;
}
.plots_container H4{
    left-margin: 25 px;
}
.plots_container_child:first-child {
    margin-right: 20px;
    width: 66% !important;
}
.plots_container_child{
    flex: 1;
    width: 33%;
    float: left;
    padding: 20px;
    border: 2px solid red;
}